<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="item">
            <p>你这瓜保熟嘛</p>
            <p class="only">给你机会你也不中用啊</p>
            <p>老师，我太想进步了</p>
            <p>你看，你又急</p>
        </div>
    </div>


    <script>
        // 删除节点
        // remove() 删除自身
        // 节点.remove()
        // removeChild(子节点)  删除调用者的子节点
        // 父级.removeChild(要删除的子节点)
        // let only = document.querySelector(".only")
        // only.remove();//删除自身

        // let item = document.querySelector(".item")
        // item.removeChild(item.children[item.children.length-1])
        // item.removeChild(item.children[item.children.length-1])

        // 替换节点
            // replaceChild()  替换子节点
            // 父级.replaceChild(要替换的节点,被替换的节点)
            // let only = document.querySelector(".only")
            // let item = document.querySelector(".item")
            // let h2 = document.createElement("h2")
            // h2.innerText = "111111"
            // item.replaceChild(h2,only)
            


        //克隆节点(复制节点)
        //cloneNode()  克隆节点
        // 深度克隆true   浅度克隆false(默认) 是否包含内部节点
        //被克隆的节点.cloneNode(); 返回的是 克隆好的节点
        let item = document.querySelector(".item")
        let copy = item.cloneNode(true)  //克隆节点赋值给 copy
        
        item.parentNode.appendChild(copy)  //将copy  添加到 box 的最后面










    </script>
</body>

</html>